<template>
  <n-space vertical style="margin-top: 10px">
    <div>
      <div class="common-top">
        <n-tooltip trigger="hover" placement="bottom">
          <template #trigger>
            <div
              class="horizontal item"
              tabindex="0"
              :class="{
                activeHor: commonVar.layout === 'horizontal' ? true : false,
              }"
              @click="changeLayout('horizontal')"
            >
              <div class="left"></div>
              <div class="right">
                <div class="header"></div>
                <div class="main"></div>
              </div>
            </div>
          </template>
          左侧菜单模式
        </n-tooltip>

        <n-tooltip trigger="hover" placement="bottom">
          <template #trigger>
            <div
              class="multiple item"
              :class="{
                verticalMult: commonVar.layout === 'multiple' ? true : false,
              }"
              tabindex="0"
              @click="changeLayout('multiple')"
            >
              <div class="left">
                <div class="small"></div>
                <div class="large"></div>
              </div>
              <div class="right">
                <div class="header"></div>
                <div class="main"></div>
              </div>
            </div>
          </template>
          左侧菜单混合模式
        </n-tooltip>

        <n-tooltip trigger="hover" placement="bottom">
          <template #trigger>
            <div
              class="vertical item"
              :class="{
                verticalAct: commonVar.layout === 'vertical' ? true : false,
              }"
              tabindex="0"
              @click="changeLayout('vertical')"
            >
              <div class="header"></div>
              <div class="main"></div>
            </div>
          </template>
          顶部菜单模式
        </n-tooltip>

        <n-tooltip trigger="hover" placement="bottom">
          <template #trigger>
            <div
              class="mix item"
              :class="{
                verticalMix: commonVar.layout === 'mix' ? true : false,
              }"
              tabindex="0"
              @click="changeLayout('mix')"
            >
              <div class="header"></div>
              <div class="main">
                <div class="left"></div>
                <div class="right"></div>
              </div>
            </div>
          </template>
          顶部菜单混合模式
        </n-tooltip>
      </div>
    </div>

    <div>
      <div class="switch-dark">
        <span>菜单手风琴</span>
        <n-switch
          v-model:value="commonVar.accordion"
          @update:value="handleMenuAccordion"
        >
          <template #checked-icon>
            <n-icon :component="ArrowForwardOutline" />
          </template>
          <template #unchecked-icon>
            <n-icon :component="ArrowBackOutline" />
          </template>
        </n-switch>
      </div>
    </div>

    <div>
      <div class="switch-dark">
        <span>启用面包屑</span>
        <n-switch
          v-model:value="commonVar.breadcrumb"
          @update:value="handleBreadcrumb"
        >
          <template #checked-icon>
            <n-icon :component="ArrowForwardOutline" />
          </template>
          <template #unchecked-icon>
            <n-icon :component="ArrowBackOutline" />
          </template>
        </n-switch>
      </div>
    </div>

    <div>
      <div class="switch-dark">
        <span>面包屑边框</span>
        <n-switch
          v-model:value="commonVar.tagBorder"
          @update:value="handleTagBorder"
        >
          <template #checked-icon>
            <n-icon :component="ArrowForwardOutline" />
          </template>
          <template #unchecked-icon>
            <n-icon :component="ArrowBackOutline" />
          </template>
        </n-switch>
      </div>
    </div>

    <div>
      <div class="switch-dark">
        <span>启用标签栏</span>
        <n-switch v-model:value="commonVar.tag" @update:value="handleTag">
          <template #checked-icon>
            <n-icon :component="ArrowForwardOutline" />
          </template>
          <template #unchecked-icon>
            <n-icon :component="ArrowBackOutline" />
          </template>
        </n-switch>
      </div>
    </div>

    <div>
      <div class="switch-dark">
        <span>面包屑符号</span>
        <n-select
          style="width: 140px"
          v-model:value="commonVar.separator"
          :options="separatorOptions"
        />
      </div>
    </div>

    <div>
      <div class="border-radius">
        <div class="radius-item">
          <span>侧边栏宽度</span>
          <div style="width: 140px">
            <n-input-number
              @update:value="handleSiderWidth"
              v-model:value="horizontalTheme.siderWidth"
              :min="210"
              :max="250"
              :step="10"
              button-placement="both"
              style="text-align: center"
            />
          </div>
        </div>
      </div>
    </div>
  </n-space>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import { useThemeVars } from "naive-ui";
import { generate } from "@ant-design/colors";
import { useThemeStore } from "@/stores/models/theme";
import { ArrowBackOutline, ArrowForwardOutline } from "@vicons/ionicons5";

onMounted(() => {});

const themeStore = useThemeStore();
const commonVar = themeStore.commonVar;
const horizontalTheme = themeStore.horizontalTheme;
const primaryColors = generate(themeStore.themeConfig.primary);
const primary1 = primaryColors[5];
const primary2 = primaryColors[4];
const primary3 = primaryColors[2];
const theme = useThemeVars();
const fontSizeLarge = computed(() => theme.value.fontSizeLarge);
const borderRadius = computed(() => theme.value.borderRadius);
const textColorBase = computed(() => theme.value.textColorBase);
const dividerColor = computed(() => theme.value.dividerColor);
const separatorOptions = [
  {
    label: "|",
    value: "|",
  },
  {
    label: ">>",
    value: ">>",
  },
  {
    label: "/",
    value: "/",
  },
];

//切换布局
const changeLayout = (layout) => {
  commonVar.layout = layout;
};

const handleSiderWidth = (value) => {
  horizontalTheme.siderWidth = value;
};

const handleMenuAccordion = (value) => {
  commonVar.accordion = value;
};

const handleBreadcrumb = (value) => {
  commonVar.breadcrumb = value;
};

const handleTag = (value) => {
  commonVar.tag = value;
};

const handleTagBorder = (value) => {
  commonVar.tagBorder = value;
};
</script>

<style scoped lang='scss'>
.theme-title {
  font-size: v-bind(fontSizeLarge);
  font-weight: bold;
}

.common-top {
  display: flex;
  flex-wrap: wrap;
  align-self: center;
  justify-content: space-around;

  .item {
    margin: 0 20px 20px 0;
  }
}

.horizontal {
  width: 100px;
  height: 70px;
  border: 1px solid v-bind(primary3);
  padding: 5px;
  display: flex;
  cursor: pointer;
  border-radius: v-bind(borderRadius);

  .left {
    width: 18px;
    height: 100%;
    background-color: v-bind(primary1);
    border-radius: v-bind(borderRadius);
  }

  .right {
    margin-left: 8px;

    .header {
      width: 60px;
      height: 16px;
      background-color: v-bind(primary2);
      border-radius: v-bind(borderRadius);
    }

    .main {
      width: 60px;
      height: 34px;
      background-color: v-bind(primary3);
      border-radius: v-bind(borderRadius);
      margin-top: 8px;
    }
  }
}

.horizontal:hover {
  border: 2px solid v-bind(primary1);
}

.activeHor {
  border: 3px solid v-bind(primary1);
}

.vertical {
  width: 100px;
  height: 70px;
  border: 1px solid v-bind(primary3);
  padding: 5px;
  cursor: pointer;
  border-radius: v-bind(borderRadius);

  .header {
    width: 86px;
    height: 16px;
    background-color: v-bind(primary1);
    border-radius: v-bind(borderRadius);
  }

  .main {
    width: 86px;
    height: 34px;
    background-color: v-bind(primary3);
    border-radius: v-bind(borderRadius);
    margin-top: 8px;
  }
}

.vertical:hover {
  border: 2px solid v-bind(primary1);
}

.verticalAct {
  border: 3px solid v-bind(primary1);
}

.multiple {
  width: 100px;
  height: 70px;
  border: 1px solid v-bind(primary3);
  padding: 5px;
  cursor: pointer;
  border-radius: v-bind(borderRadius);
  display: flex;

  .left {
    width: 34px;
    height: 100%;
    display: flex;

    .small {
      width: 8px;
      height: 100%;
      background-color: v-bind(primary1);
      margin-right: 4px;
      border-radius: v-bind(borderRadius);
    }
    .large {
      width: 18px;
      height: 100%;
      background-color: v-bind(primary1);
      border-radius: v-bind(borderRadius);
    }
  }

  .right {
    margin-left: 4px;

    .header {
      width: 50px;
      height: 16px;
      background-color: v-bind(primary2);
      border-radius: v-bind(borderRadius);
    }

    .main {
      width: 50px;
      height: 34px;
      background-color: v-bind(primary3);
      border-radius: v-bind(borderRadius);
      margin-top: 8px;
    }
  }
}

.multiple:hover {
  border: 2px solid v-bind(primary1);
}

.verticalMult {
  border: 3px solid v-bind(primary1);
}

.mix {
  width: 100px;
  height: 70px;
  border: 1px solid v-bind(primary3);
  padding: 5px;
  cursor: pointer;
  border-radius: v-bind(borderRadius);

  .header {
    width: 86px;
    height: 16px;
    background-color: v-bind(primary1);
    border-radius: v-bind(borderRadius);
  }

  .main {
    margin-top: 4px;
    display: flex;

    .left {
      width: 18px;
      height: 38px;
      background-color: v-bind(primary2);
      border-radius: v-bind(borderRadius);
      margin-right: 6px;
    }

    .right {
      width: 62px;
      height: 38px;
      background-color: v-bind(primary3);
      border-radius: v-bind(borderRadius);
    }
  }
}

.mix:hover {
  border: 2px solid v-bind(primary1);
}

.verticalMix {
  border: 3px solid v-bind(primary1);
}

.border-radius {
  margin-top: 8px;
}

.border-radius .radius-item {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5px 0 5px;
  border-radius: v-bind(borderRadius);
  color: v-bind(textColorBase);
}
.radius-item:hover {
  background-color: v-bind(dividerColor);
}
.switch-dark {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5px 0 5px;
  border-radius: v-bind(borderRadius);
  color: v-bind(textColorBase);
}
.switch-dark:hover {
  background-color: v-bind(dividerColor);
}
</style>